<script setup lang="ts">
import {CheckCircleOutlined, InfoCircleOutlined, LoadingOutlined, UpOutlined, DownOutlined} from '@ant-design/icons-vue';
/* props */
const props = defineProps({
	status: { type: String , required:true, validator:(value:string): boolean => { return ['pending', 'success','error'].includes(value); }, },
})
/* data */
const collapse = ref(false)
let autoTimer:any = null // 默认自增计时的定时器
const costTime = ref(0.0)
const refContent =ref()
const refBody =ref()
const hasHis= ref(true)

onMounted(()=>{
	if(props.status==='pending'){
		autoTimer = setInterval(() => {
			costTime.value += 1
		},100)
	}else{
		hasHis.value = false
	}
})

// watch(
// 	() => props.status,
// 	(newVal:string) => {
// 		if(newVal!=='pending'){
// 			clearInterval(autoTimer)
// 			autoTimer=null
// 		}else{
// 			costTime.value = 0;
// 			autoTimer = setInterval(() => {
// 				costTime.value += 0.1
// 			},200)
// 		}
// 	}
// )

/* computed */
// 标题展示
const myTitle = computed(()=>{
	switch (props.status) {
		case 'success':
			clearInterval(autoTimer)
			autoTimer=null
			return '思考已完成';
		case 'error':
			clearInterval(autoTimer)
			autoTimer=null
			return '思考中断...';
		case 'pending':
			return '容朕三思...';
		default:
			return undefined;
	}

})

/* methods */
const toggleBody = ()=>{
	let bodyHeight = refContent.value.offsetHeight + 12;
	console.log(bodyHeight)
	if(!collapse.value){
		refBody.value.style.height = bodyHeight+'px';
		collapse.value = true;
		nextTick(()=>{
			refBody.value.style.height = '0';
		})
	}else{
		collapse.value = false;
		nextTick(()=>{
			refBody.value.style.height = bodyHeight+'px';
		})
	}
}
</script>

<template>
	<div class="think-process">
		<div class="think-process__header" @click="toggleBody">
			<div class="think-process-icon" :class="'color-'+status">
				<CheckCircleOutlined v-if="status==='success'"/>
				<InfoCircleOutlined v-else-if="status==='error'"/>
				<LoadingOutlined v-else/>
			</div>
			<div class="think-process__title">{{myTitle}}&nbsp;&nbsp;&nbsp;&nbsp;<i v-if="hasHis">({{costTime/10}}s)</i></div>
			<div class="think-process__arrow"><UpOutlined v-if="collapse"/> <DownOutlined v-else /></div>
		</div>
		<div class="think-process__body" ref="refBody">
			<div class="think-process__content" ref="refContent"><slot></slot></div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.think-process {
	margin-bottom:16px;
	&__header{
		display:inline-flex; align-items: center; gap:12px; cursor: pointer; height:32px; line-height:32px;background:var(--bg-link-hover-color);
		border-radius:18px; padding:2px;
	}
	&__title{
		font-weight:bold;
		i{font-weight: normal; font-style: normal;color:var(--font-base-color);}
	}
	&-icon{
		width: 28px; height:28px; display: flex; align-items: center; justify-content: center; color:#fff; font-size:18px;
		border-radius: 15px;
	}
	&__arrow{
		margin-left:auto; margin-right:12px; font-size:12px;
	}
	&__body{
		height:auto; overflow: hidden;
		transition: height .3s ease-in-out;
		color:var(--font-secondary-color);
	}
	&__content{
		margin:12px 0 0 14px; padding-left:12px; border-left:2px solid var(--border-color);
	}
}
.color-pending{ background-color: var(--primary-color); }
.color-success{ background-color: var(--success-color); }
.color-error{ background-color: var(--error-color); }
</style>